<template>
	<div class="chat_item">
		<div class="question">
			<el-avatar :size="40" icon="el-icon-user-solid"></el-avatar>
			<div class="text">{{ questionData.query }}</div>
		</div>
		<div class="answer">
			<i class="icon">{{ siteData.icon }}</i>
			<div class="chat_content">
				<div :class="['process', { expand: expandFlow }]">
					<div class="header" @click="handleExpandFlow()">
						<i v-if="!answerData.isFinish && !answerData.isError" class="el-icon-loading"></i>
						<i v-else-if="!!answerData.isFinish" class="el-icon-success" style="color: #079455"></i>
						<i v-else-if="!!answerData.isError" class="el-icon-error" style="color: #e13232"></i>
						<h2>工作流程</h2>
						<span class="el-icon-arrow-right"></span>
					</div>
					<ul class="flowbox" v-if="expandFlow && answerData.process.length > 0">
						<li v-for="(item, index) in answerData.process" :key="index">
							<svg-icon :icon-name="item.node_type"></svg-icon>
							<h4>{{ item.title }}</h4>
							<span class="status" v-if="item.time === 0">
								<i class="el-icon-loading el-icon--left"></i>
								RUNNING
							</span>
							<span class="status" v-else>
								{{ item.time }}
								<i class="el-icon-success el-icon--right"></i>
							</span>
						</li>
					</ul>
				</div>
				<div class="thought_loading" v-if="!answerData.thought && !answerData.error">
					<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 52 24">
						<circle fill="#000" stroke="none" cx="6" cy="12" r="6">
							<animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1"></animate>
						</circle>
						<circle fill="#000" stroke="none" cx="26" cy="12" r="6">
							<animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2"></animate>
						</circle>
						<circle fill="#000" stroke="none" cx="46" cy="12" r="6">
							<animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.3"></animate>
						</circle>
					</svg>
				</div>
				<div :class="['thought', { expand: expandIdea }]" v-else-if="!!answerData.thought">
					<div class="header" @click="handleExpandCont()">
						<i class="el-icon-arrow-right"></i>
						<h2>思维({{ answerData.thoughtTime | timeFilter }}秒)</h2>
					</div>
					<div class="message" ref="message" v-html="answerData.thought"></div>
				</div>
				<div class="error" v-else-if="!!answerData.error">{{ answerData.error }}</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	props: {
		data: { type: Object, default: () => ({}) }
	},
	data() {
		return {
			expandFlow: false,
			expandIdea: false
		};
	},
	computed: {
		...mapGetters(['siteData']),
		questionData() {
			return this.data?.question || {};
		},
		answerData() {
			return this.data?.answer || {};
		}
	},
	filters: {
		timeFilter(time) {
			return (time / 100).toFixed(1);
		}
	},
	watch: {
		expandIdea(flag) {
			let messageRef = this.$refs['message'];
			if (messageRef) {
				let ideabox = messageRef.querySelector('.ideabox');
				ideabox.style.display = flag ? 'block' : 'none';
			}
		}
	},
	methods: {
		handleExpandFlow() {
			this.expandFlow = !this.expandFlow;
		},

		handleExpandCont() {
			this.expandIdea = !this.expandIdea;
		}
	}
};
</script>

<style lang="scss" scoped>
.chat_item {
	margin-bottom: 20px;
	.question,
	.answer {
		display: flex;
		align-items: flex-start;
	}
	i.icon,
	.el-avatar {
		flex-shrink: 0;
	}
	i.icon {
		width: 40px;
		height: 40px;
		font-size: 20px;
		line-height: 40px;
		font-style: normal;
		text-align: center;
		border-radius: 4px;
		background-color: var(--icon-background);
	}
	i.el-icon-success {
		color: #079455;
	}
	.question {
		flex-direction: row-reverse;
		margin-bottom: 10px;
	}
	.text {
		font-size: 15px;
		max-width: 100%;
		overflow: hidden;
		line-height: 24px;
		padding: 8px 12px;
		border-radius: 12px;
		margin: 0 10px 0 40px;
		word-break: break-all;
		box-sizing: border-box;
		background-color: #e1effe;
	}
}
.chat_content {
	flex: 1;
	padding: 8px;
	min-height: 24px;
	border-radius: 12px;
	margin: 0 40px 0 10px;
	background-color: #fff;
	.header {
		display: flex;
		align-items: center;
		cursor: pointer;
		h2 {
			font-size: 14px;
			line-height: 1;
			margin: 0 6px;
		}
		span {
			transition: transform 0.2s linear;
		}
	}

	ul.flowbox {
		padding: 0;
		margin: 10px 0 0;
		list-style: none;
		li {
			display: flex;
			align-items: center;
			font-size: 13px;
			line-height: 1;
			padding: 6px;
			cursor: pointer;
			margin-top: 2px;
			border-radius: 8px;
			background-color: #fff;
			border: solid 1px rgba(16, 24, 40, 0.08);
			box-shadow: 0 0 5px rgba(200, 206, 218, 0.04);
			&:hover {
				background-color: #f7fdfd;
			}
		}
		span.svg-icon {
			width: 20px;
			height: 20px;
			line-height: 20px;
		}
		span.status {
			display: flex;
			align-items: center;
			line-height: 1;
		}
		h4 {
			flex: 1;
			margin: 0 6px;
			overflow: hidden;
		}
	}
	&:deep(.message) {
		font-size: 15px;
		line-height: 1.6;
		color: #303133;
		p {
			margin-top: 1em;
			text-align: justify;
		}
	}
	&:deep(.ideabox) {
		display: none;
		color: #707c77;
		overflow: hidden;
		padding: 12px 16px;
		border-radius: 4px;
		background-color: #f9fafb;
		border-left: solid 1px #d0d5dd;
		p:first-child {
			margin-top: 0;
		}
	}
	.process {
		padding: 8px;
		color: #606266;
		border-radius: 8px;
		border: solid 1px transparent;
		background-image: linear-gradient(90deg, rgba(200, 206, 218, 0.2), rgba(200, 206, 218, 0.04));
		&.expand {
			background-color: #ecfdf3;
			border-color: rgba(16, 24, 40, 0.08);
			.header span {
				transform: rotate(90deg);
			}
		}
	}
	.thought {
		padding: 8px;
		color: #909399;
		.header i {
			transition: transform 0.2s linear;
		}
		&.expand .header i {
			transform: rotate(90deg);
		}
	}
}
.thought_loading {
	padding: 4px 8px;
	svg {
		width: 24px;
	}
}
</style>
